<!--
 * @Description: file content
 * @Author: tangyanqing
 * @Date: 2021-09-13 10:22:29
 * @LastEditors: tangyanqing
 * @LastEditTime: 2021-09-13 16:53:49
-->
<template>
	<view class="content page-content">
    <view class="search-bg"></view>
		<view class="search-content">
			<!-- <text class="title">综合查询页面</text> -->
      <view v-for="item of searchList" :key="item.id" class="contacts-item" @click="linkTo(item)">
        <view class="contacts-content">
          <text class="iconfont" :class="item.icon"></text>
          <text class="contacts-label">{{ item.label }}</text>
        </view>
        <text class="contacts-btns">
          <uni-icons type="arrowright" size="16"></uni-icons>
        </text>
      </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
        searchList: [
					{
						id: 1,
						icon: 'icon-ziyuanyizhangtu',
						label: '资源一张图',
					},
					{
						id: 2,
						icon: 'icon-zhibanbiao',
						label: '值班表',
					},
          {
						id: 3,
						icon: 'icon-yuanku',
						label: '预案库',
					}
				],
			}
		},
		onLoad() {
		},
		onShow() {
			// uni.hideTabBar({
			// 	animation: false
			// })
		},
		methods: {
      linkTo(data) {
				uni.navigateTo({
					url: '/pages/mapResource/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
    position: relative;
    .search-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 256rpx;
      left: calc(50% - 342rpx);
      z-index: 2;
      width: 686rpx;
      height: 360rpx;
      border-radius: 16rpx;
      background: #fff;
      box-shadow: 0px 5px 15px rgba(2, 122, 255, 0.1);
      .title {
        font-size: 36rpx;
        text-align: center;
        color: #fff;
      }
    }
    .search-bg {
      background: url('../../static/images/search-bg.png') bottom;
      background-size: cover;
      width: 100%;
      height: calc(583rpx - 44px);
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }
    .contacts-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 32rpx;
      border-bottom: 1rpx solid #E4E7F0;
      width: 100%;
      height: 120rpx;
      line-height: 120rpx;
      box-sizing: border-box;
      &:last-child {
        border-bottom: 0;
      }
    }

    .contacts-label {
      padding-left: 32.68rpx;
      font-size: 30rpx;
      color: #2B2B2B;
    }

    .iconfont {
      color: #027AFF;
    }

    .contacts-btns {
      color: #707070;
    }
	}

</style>
